<template>
  <div class="main_margin">
    <a-row>
      <a-col :span="6" style=" overflow: hidden">
        <a-tree
          :expanded-keys="expandedKeys"
          :selected-keys="selectedKeys"
          :tree-data="treeData"
          :replace-fields="replaceFields"
          @expand="onExpand"
          @select="onSelectTree"
        >
          <a-tooltip>
            <template slot="title"></template>
          </a-tooltip>
        </a-tree>
      </a-col>
      <!-- <a-col :span="1">
        <div style="border: #ffffff 1px solid"></div>
      </a-col> -->
      <a-col :span="18">
        <div>
          <a-row style="line-height: 40px">
            <a-col :span="16">
              <div style="border: #ffffff 1px solid"></div>
            </a-col>
            <a-col :span="2">
              <a-button type="primary" @click="insertmenushow"> 新增 </a-button>
            </a-col>
            <a-col :span="2">
              <a-button type="primary" @click="batchShow"> 批量显示 </a-button>
            </a-col>
            <a-col :span="2">
              <a-button type="primary" @click="batchHide"> 批量隐藏 </a-button>
            </a-col>
            <a-col :span="2">
              <a-button type="primary" @click="batchDel"> 批量删除 </a-button>
            </a-col>
          </a-row>
          <a-table
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
            :columns="columns"
            :data-source="tableData"
          >
            <template slot="operation" slot-scope="text, record">
              <a slot="action" href="javascript:;" @click="onEdit(record)"
                >编辑</a
              >
              <a
                slot="action"
                href="javascript:;"
                @click="onHide(record)"
                style="margin-left: 5px"
                >隐藏</a
              >
              <a
                slot="action"
                href="javascript:;"
                @click="onDel(record)"
                style="margin-left: 5px"
                >删除</a
              >
            </template>
          </a-table>
        </div>
      </a-col>
    </a-row>

    <a-modal
      title="Title"
      :width="800"
      :visible="modalvisible"
      @ok="sureCategory"
      @cancel="handleCancel"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item
          label="上级菜单"
          :label-width="formLabelWidth"
          prop="valueId"
        >
          <a-tree-select
            v-model="form.valueId"
            :defaultValue="form.valueId"
            :tree-data="treeData"
            search-placeholder="Please select"
            :replace-fields="replaceFields"
          />
        </el-form-item>
        <el-form-item
          label="菜单名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="唯一标识"
          :label-width="formLabelWidth"
          prop="uniflag"
        >
          <el-input v-model="form.uniflag" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="菜单类型"
          :label-width="formLabelWidth"
          prop="menu_type"
        >
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in menu_type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="图标类型"
          :label-width="formLabelWidth"
          prop="icontype"
        >
          <el-select v-model="form.icontype" placeholder="请选择">
            <el-option
              v-for="item in icon_type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="图片图标"
          :label-width="formLabelWidth"
          v-if="form.icontype == 'imgicon'"
        >
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="站外链接"
          :label-width="formLabelWidth"
          v-if="form.type == 'openurl'"
        >
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="站内链接"
          :label-width="formLabelWidth"
          v-if="form.type == 'innerurl'"
        >
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="脚本"
          :label-width="formLabelWidth"
          v-if="form.type == 'callscript'"
        >
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="文件"
          :label-width="formLabelWidth"
          v-if="form.type == 'file'"
        >
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="页面"
          :label-width="formLabelWidth"
          v-if="form.type == 'openpage'"
        >
          <a-tree-select
            :tree-data="infoPageList"
            search-placeholder="Please select"
            :replace-fields="replaceFields"
          />
        </el-form-item>
        <el-form-item
          label="打开方式"
          :label-width="formLabelWidth"
          prop="target"
        >
          <el-select v-model="form.target" placeholder="请选择">
            <el-option
              v-for="item in target_type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="显示顺序"
          :label-width="formLabelWidth"
          prop="orderno"
        >
          <el-input v-model="form.orderno" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="显示/隐藏"
          :label-width="formLabelWidth"
          prop="target"
        >
          <el-select v-model="form.display" placeholder="请选择">
            <el-option
              v-for="item in display_type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单权限" :label-width="formLabelWidth">
          <a-tree-select
            :tree-data="permissionData"
            search-placeholder="Please select"
            :replace-fields="replaceFields"
            allow-clear
            multiple
            @change="onChange"
            @search="onSearch"
            @select="onSelectTreeSelect"
          />
        </el-form-item>
      </el-form>
    </a-modal>
  </div>
</template>

<script>
import { menulist } from "../../api/admin";
export default {
  name: "manager",
  data() {
    return {
      insorup: false,
      formLabelWidth: "120px",
      modalvisible: false,
      expandedKeys: [], //展开的节点
      selectedKeys: [], //选中的节点
      replaceFields: {
        key: "RUID",
        value: "RUID",
        title: "name",
        children: "children",
      },
      formLayout: "horizontal",
      form: {
        valueId: "",
        name: "",
        orderno: "",
        display: "",
        icontype: "",
        norightoperator: "",
        target: "",
        type: "",
        uniflag: "",
        icon: "",
        openpage: "",
        openurl: "",
        innerurl: "",
        callscript: "",
        file: "",
      },
      treeData: [],
      infoPageList: [], //站内页面列表
      permissionData: [], //权限列表
      menu_type_list: [
        {
          label: "分隔条",
          value: "separator",
        },
        {
          label: "站外链接",
          value: "openurl",
        },
        {
          label: "站内链接",
          value: "innerurl",
        },
        {
          label: "站内页面",
          value: "openpage",
        },
        {
          label: "脚本",
          value: "callscript",
        },
        {
          label: "文件",
          value: "file",
        },
      ],
      columns: [
        {
          title: "菜单名称",
          dataIndex: "name",
        },
        {
          title: "菜单类型",
          dataIndex: "type",
          customRender: (type) => {
            for (var i = 0; i < this.menu_type_list.length; i++) {
              if (type == this.menu_type_list[i].value) {
                return this.menu_type_list[i].label;
              }
            }
          },
        },
        {
          title: "打开方式",
          dataIndex: "target",
          customRender: (text) => {
            if (text == "_blank") {
              return "在新页面打开";
            } else if (text == "_self") {
              return "在当前页面打开";
            }
          },
        },
        {
          title: "显示/隐藏",
          dataIndex: "display",
          customRender: (text) => {
            if (text == "show") {
              return "显示";
            } else if (text == "hide") {
              return "隐藏";
            }
          },
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      tableData: [],
      icon_type_list: [
        {
          label: "图片图标",
          value: "imgicon",
        },
        {
          label: "文字图标",
          value: "texticon",
        },
      ],
      target_type_list: [
        {
          label: "在当前页面打开",
          value: "_self",
        },
        {
          label: "新页面打开",
          value: "_blank",
        },
      ],
      display_type_list: [
        {
          label: "显示",
          value: "show",
        },
        {
          label: "隐藏",
          value: "hide",
        },
      ],
      selectedRowKeys: [], // Check here to configure the default column
      rules: {
        name: [
          {
            required: true,
            message: "请输入菜单名称",
            trigger: "blur",
          },
        ],
        uniflag: [
          {
            required: true,
            message: "请输入唯一标识",
            trigger: "blur",
          },
        ],
        orderno: [
          {
            required: true,
            message: "请输入显示顺序",
            trigger: "blur",
          },
        ],
        valueId: [
          {
            required: true,
            message: "请选择上级分类",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    getMenuList() {
      menulist({
        type: "menunode7",
        rootnode: {
          RUID: "menunode",
          exist: "0",
          show: "1",
          propvalue: {
            name: "菜单根节点",
          },
        },
        deep: -1,
        field:
          "type,name,url,target,orderno,parentid,icontype,manageright,display,staticparam,uniflag",
        key: {
          RUID: "RUID",
          name: "name",
          children: "children",
          display: "display",
        },
        filter: [],
        order: [
          {
            fieldname: "orderno",
            valuetype: "N",
            type: "A",
          },
        ],
      }).then((res) => {
        if (res.cxajaxrc == "0") {
          console.log(res.nodes);
          this.treeData = res.nodes;
          this.expandedKeys.push(res.nodes[0].RUID);
          this.selectedKeys.push(res.nodes[0]);
          var datalist = res.nodes[0].children;
          var list = [];
          for (let i = 0; i < datalist.length; i++) {
            list.push({
              key: datalist[i].RUID,
              name: datalist[i].name,
              type: datalist[i].type,
              target: datalist[i].target,
              display: datalist[i].display,
              icontype: datalist[i].icontype,
              uniflag: datalist[i].uniflag,
              norightoperator: datalist[i].norightoperator,
              orderno: datalist[i].orderno,
              parentid: datalist[i].parentid,
              childrens: datalist[i].children, //因antd table支持树状图显示,所以children加s避免冲突
            });
          }
          this.tableData = list;
        } else {
          this.$message.error("菜单列表:检索资料时发生错误");
        }
      });
    },
    getwebInfoData() {
      menulist({
        type: "pageinfo7",
        rootnode: {
          RUID: "pagenode",
          exist: "0",
          show: "1",
          propvalue: {
            name: "页面管理根节点",
            type: "group",
          },
        },
        deep: -1,
        field:
          "RUID,parentid,name,label,type,title,pageruid,cssfile,jsfile,script,style",
        key: {
          RUID: "RUID",
          name: "name",
          children: "children",
        },

        order: [
          {
            fieldname: "name",
            type: "D",
          },
        ],
      }).then((res) => {
        if (res.cxajaxrc == "0") {
          console.log(res.nodes);
          this.infoPageList = res.nodes;
        } else {
          this.$message.error("菜单列表:检索资料时发生错误");
        }
      });
    },
    getpermissionData() {
      menulist({
        type: "permission6",
        rootnode: {
          RUID: "permission",
          exist: "0",
          show: "0",
        },
        deep: -1,
        field: "RUID,`name`,parentid",
        key: {
          RUID: "ruid",
          name: "name",
          children: "children",
        },
        filter: [],
        order: [
          {
            fieldname: "name",
            type: "D",
          },
        ],
      }).then((res) => {
        if (res.cxajaxrc == "0") {
          console.log(res.nodes);
          res.nodes = JSON.stringify(res.nodes).replace(/children/g, "childrens");
          res.nodes = JSON.parse(res.nodes);
          var rootdata = [{ruid:"permissionroot",name:"ALL",childrens:res.nodes}];
          this.permissionData = res.nodes;
        } else {
          this.$message.error("菜单列表:检索资料时发生错误");
        }
      });
    },
    onEdit(record) {
      this.getwebInfoData();
      console.log(record);
      console.log(this.treeData);
      this.form.valueId = record.parentid;
      this.form.type = record.type;
      this.form.icontype = record.icontype;
      this.form.name = record.name;
      this.form.uniflag = record.uniflag;
      this.form.target = record.target;
      this.form.display = record.display;
      this.form.orderno = record.orderno;
      this.getpermissionData();
      this.modalvisible = true;
    },
    sureCategory() {
      if (this.insorup) {
        this.insertCategory(); //新增
      } else {
        this.updateCategory(); //修改
      }
    },
    insertCategory(e) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$message.success("提交");
          this.modalvisible = false;
          this.initform();
        } else {
          this.$message.error("error submit!!");
          return false;
        }
      });
    },
    updateCategory(e) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$message.success("提交");
          this.modalvisible = false;
          this.initform();
        } else {
          this.$message.error("error submit!!");
          return false;
        }
      });
    },
    handleSubmit() {
      this.form.setFieldsValue({
        note: `Hi, ${value === "male" ? "man" : "lady"}!`,
      });
    },
    insertmenushow() {
      this.initform();
      this.modalvisible = true;
    },
    handleCancel(e) {
      this.$refs["form"].resetFields();
      this.initform();
      this.modalvisible = false;
    },
    initform() {
      this.form = {
        valueId: "",
        name: "",
        orderno: "",
        display: "",
        icontype: "",
        norightoperator: "",
        target: "",
        type: "",
        uniflag: "",
        icon: "",
        openpage: "",
        openurl: "",
        innerurl: "",
        callscript: "",
        file: "",
      };
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    onExpand(expandedKeys) {
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onSelectTree(selectedKeys, e, info) {
      if (e.node.$options.propsData.dataRef.children) {
        var list = e.node.$options.propsData.dataRef.children;
        var arr2 = JSON.stringify(list).replace(/children/g, "childrens");
        var arr3 = JSON.parse(arr2);
        this.tableData = arr3;
      }else{
        this.tableData = [];
      }
    },
    onChange(value) {
      console.log(value);
      this.value = value;
    },
    onSearch() {
      console.log(...arguments);
    },
    onSelectTreeSelect() {
      console.log(...arguments);
    },
    onHide() {
      this.$message.success("隐藏");
    },
    onDel() {
      this.$message.success("删除");
    },
    batchShow() {
      this.$message.success("批量显示");
    },
    batchHide() {
      this.$message.success("批量隐藏");
    },
    batchDel() {
      this.$message.success("批量删除");
    },
  },
  beforeMount: function () {
    this.getMenuList();
  },
};
</script>

<style>
.main_margin {
  margin: 10px;
}
.span-ellipsis {
  width: 170px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

.ant-tree-title {
  font-size: 18px;
}

.notshow {
  display: none;
}
</style>